<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>张繁荣</h1>
    <script src="js/echarts.min.js"></script>
    <script src="js/echarts-gl.js"></script>
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {},
        visualMap: {
          show: false,
          dimension: 2,
          min: -1,
          max: 1,
          inRange: {
            color: [
              "#313695",
              "#4575b4",
              "#74add1",
              "#abd9e9",
              "#e0f3f8",
              "#ffffbf",
              "#fee090",
              "#fdae61",
              "#f46d43",
              "#d73027",
              "#a50026",
            ],
          },
        },
        xAxis3D: {},
        yAxis3D: {},
        zAxis3D: {},
        grid3D: {},
        series: [
          {
            type: "surface",
            parametric: true,
            // shading: 'albedo',
            parametricEquation: {
              u: {
                min: -Math.PI,
                max: Math.PI,
                step: Math.PI / 20,
              },
              v: {
                min: 0,
                max: Math.PI,
                step: Math.PI / 20,
              },
              x: function (u, v) {
                return Math.sin(v) * Math.sin(u);
              },
              y: function (u, v) {
                return Math.sin(v) * Math.cos(u);
              },
              z: function (u, v) {
                return Math.cos(v);
              },
            },
          },
        ],
        // series: [
        //   {
        //     type: "line3D",
        //     data: [
        //       [4, 0, 6],
        //       [1, 1, 4],
        //       [3, 2, 5],
        //       [4, 0, 6],
        //       [3, 2, 6],
        //       [2, 2, 2],
        //       [3, 0, 2],
        //       [4, 1, 5],
        //       [5, 2, 5],
        //     ],
        //   },
        // ],
        // xAxis3D: {
        //   //横坐标
        //   type: "category",
        //   data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        // },
        // yAxis3D: {
        //   type: "category",
        // },
        // zAxis3D: {
        //   type: "value",
        // },
        // grid3D: {
        //   boxWidth: 200,
        //   boxDepyh: 20,
        //   axisPointer: {
        //     show: false,
        //   },
        //   light: {
        //     main: { intensity: 1.2 },
        //     ambient: { intensity: 0.3 },
        //   },
        //   viewControl: {
        //     alpha: 10, //控制场景平移旋转
        //     beta: 20,
        //     minAlpha: 10,
        //     maxAlpha: 10,
        //     minBeta: 20,
        //     maxBeta: 20,
        //   },
        // },
        // series: [
        //   {
        //     type: "bar3D",
        //     name: "1",
        //     barSize: 15,
        //     data: [
        //       [0, 0, 1200 + 1200 + 1800],
        //       [2, 0, 10000],
        //       [4, 0, 6000],
        //     ],
        //     stack: "stack",
        //     shading: "lambert",
        //     emphasis: {
        //       label: {
        //         show: true,
        //       },
        //     },
        //   },
        //   {
        //     type: "bar3D",
        //     name: "2",
        //     barSize: 15,
        //     data: [
        //       [1, 0, 12000],
        //       [3, 0, 60000],
        //       [5, 0, 12000],
        //     ],
        //     // stack: 'stack',
        //     shading: "lambert",
        //     emphasis: {
        //       label: {
        //         show: true,
        //       },
        //     },
        //   },
        // ],
      };

      myChart.setOption(option);
    </script>
  </body>
</html>